<template>
    <div class="AddMatchDetail" v-loading="isloading">
      <div class="AddMatchTop">
        <el-steps :active="step" style="   width: 72%;">
          <el-step title="赛事基本信息" icon="el-icon-edit" ></el-step>
          <el-step title="积分及必填信息" icon="el-icon-edit-outline" ></el-step>
          <el-step title="完成" icon="el-icon-check" ></el-step>
        </el-steps>
      </div>
      <div class="AddMatchContent">
       <div class="AddMatchInfo" v-show="step==1||step==3">
           <div class="MatchBasicInfo">
           <div style="  display: flex; flex-direction: column;justify-content: space-around;">
             <div class="Item">
               <div class="InfoItem">
                 <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>赛事名称：</div>
                 <el-input v-model="MatchName" placeholder="请输入赛事名称" class="InputSize"></el-input>
               </div>
               <div  class="InfoItem">
                 <div class="NameFont">裁判长：</div>
                 <div>{{RefereeName}}</div>
               </div>
             </div>
             <div class="Item">
               <div class="InfoItem">
                 <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>主办单位：</div>
                 <el-input v-model="Organization" placeholder="请输入主办单位" class="InputSize"></el-input>
               </div>
               <div class="InfoItem">
                 <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>比赛地点：</div>
                 <el-input v-model="MatchLocation" placeholder="请输入比赛地点" class="InputSize"></el-input>
               </div>
             </div>
             <div style="margin-bottom: 30px;">
               <el-card v-for="(SelfItem,index) in SelfDefined" :key="index" class=" SelfDefined" >
                 <div style="display: flex;justify-content: space-between;">
                   <div class="InfoItem">
                     <div class="NameFont">自定义组别：</div>
                     <el-input v-model="SelfDefined[index].group" placeholder="请输入自定义组别" class="InputSize"></el-input>
                   </div>
                   <div class="InfoItem" style="width: 45%;">
                     <div style="width: 20%;">
                      <div>出生年月日：</div>
                       <span style="color: #888;">(不填则为不限)</span>
                       </div>
                     <div class="Age">
                        <el-date-picker  v-model="SelfDefined[index].AgeMin" value-format="yyyy-MM-dd"  type="date" placeholder="选择日期时间" class="AgeInput"></el-date-picker>
                           <span style="line-height:40px">至</span>
                        <el-date-picker  v-model="SelfDefined[index].AgeMax" value-format="yyyy-MM-dd"  type="date" placeholder="选择日期时间" class="AgeInput"></el-date-picker>
                     </div>
                     <i v-show="SelfDefined.length > 1" class="iconfont icon-close_light addClose" @click="addClose(index)"></i>
                   </div>
                 </div>
                 <div style="display: flex;  align-items: center; height: 126px;">
                   <div style="width: 9%;">
                     <div style="height: 42px;align-items: center;display: flex;"><i class='iconfont icon-xinghao colorRed'></i>项目类型：</div>
                     <div style="height: 42px;align-items: center;display: flex;">价格（元）：</div>
                     <div style="height: 42px;display: flex;flex-direction: column;">
                       <div style="font-size: 12px;color: #999;">不填代表无限制</div>
                       <div>
                         <i class="iconfont icon-tishi" style="font-size: 14px;"></i>
                         人数限制：
                       </div>
                     </div>
                   </div>
                    <div style="width: 5%;margin-left: 10px;" v-if="SelfDefined && addType == 1" v-for="(item, index) in SelfDefined[index].types" :key="item.id">
                     <el-checkbox v-model="item.bool" style="width: 15%;margin-left: 10px;" :label="item" :key="`${index}a`">{{item.type}}</el-checkbox>
                     <el-input
                       size="small"
                       maxlength="4"
                       v-model="item.price" :disabled="!item.bool" style="height: 42px;align-items: center;display: flex;">
                     </el-input>
                     <el-input
                       size="small"
                       maxlength="4"
                       v-model="item.limit" :disabled="!item.bool" style="height: 42px;align-items: center;display: flex;">
                     </el-input>
                    </div>

                    <div v-if="SelfDefined && addType == 0" style="width: 60%;display: flex;">
                     <div style="width: 15%;margin-left: 10px;" v-for="(PNA,PNAindex) in SelfDefined[index].types">
                       <el-checkbox-group v-model="SelfDefined[index].types[PNAindex].type" @change="projectTypeChange" style="height: 42px;align-items: center;display: flex;">
                         <el-checkbox :label="MatchType[PNAindex]" style="width: 8%"></el-checkbox>
                       </el-checkbox-group>
                       <el-input
                         size="small"
                         maxlength="4"
                         v-model="SelfDefined[index].types[PNAindex].price" :disabled="!SelfDefined[index].types[PNAindex].type" style="height: 42px;align-items: center;display: flex;">
                       </el-input>
                       <el-input
                         size="small"
                         maxlength="4"
                         v-model="SelfDefined[index].types[PNAindex].limit" :disabled="!SelfDefined[index].types[PNAindex].type" style="height: 42px;align-items: center;display: flex;">
                       </el-input>
                     </div>
                   </div>
                 </div>
               </el-card>
               <div  class="addMore" style="font-size: 30px;" @click="addMore" v-show="step!=3">+</div>
             </div>
             <div class="Item">
               <div class="InfoItem">
                 <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>报名开始时间：</div>
                 <div class="block">
                   <el-date-picker
                     v-model="enrollTime"
                     type="datetime"
                     value-format="yyyy-MM-dd HH:mm:ss"
                     placeholder="选择报名开始时间">
                   </el-date-picker>
                 </div>
               </div>
               <div class="InfoItem">
                 <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>报名截止时间：</div>
                 <div class="block">
                   <el-date-picker
                     v-model="EndTime"
                     type="datetime"
                     value-format="yyyy-MM-dd HH:mm:ss"
                     placeholder="选择日期时间">
                   </el-date-picker>
                 </div>
               </div>
             </div>
             <div class="Item">
               <div class="InfoItem">
                 <div class="NameFont"><i class='iconfont icon-xinghao colorRed'></i>比赛开始时间：</div>
                 <div class="block">
                   <el-date-picker
                     v-model="StartTime"
                     type="datetime"
                     value-format="yyyy-MM-dd HH:mm:ss"
                     placeholder="选择日期时间">
                   </el-date-picker>
                 </div>
               </div>
             </div>
           </div>
           <!-- 是否考虑同单位回避 -->
           <div class="Avoid">
             <div class="InfoItem">
               <div>是否考虑同单位回避：</div>
               <el-switch
                 v-model="AvoidCheck"
                 active-color="#409EFF">
               </el-switch>
             </div>
             <el-collapse-transition>
               <el-card class="box-card" v-show="AvoidCheck">
                 <div class="ChooseUnit">
                   <div style="width: 15%">一级单位：</div>
                   <el-input :disabled="AvoidInputsDisabled[0]" v-model="OneUnit" style="width: 40%;" ></el-input>
                 </div>
                 <div class="ChooseUnit">
                   <div style="width: 15%">二级单位：</div>
                   <el-input :disabled="AvoidInputsDisabled[1]" v-model="TwoUnit" style="width: 40%;"></el-input>
                 </div>
                 <div class="ChooseUnit">
                   <div style="width: 15%">三级单位：</div>
                   <el-input :disabled="AvoidInputsDisabled[2]" v-model="ThreeUnit" style="width: 40%;"></el-input>
                 </div>
               </el-card>
             </el-collapse-transition>
           </div>
           <div v-show="step==1" style="justify-content: center;display: flex;margin-top: 30px;margin-bottom: 30px;">
             <el-button round style="width: 200px" type="primary" @click="GoStep2">下一步</el-button>
           </div>
         </div>
       </div>
       <!-- 报名必填信息 -->
       <div class="AddMatchImportant" v-show="step==2||step==3">
           <div class="MatchImportantInfo">
           <div class="NecessaryInfo">
             <div class="NameFont">报名必填信息：</div>
             <div style="height: 84px;display: flex;flex-direction: column;justify-content: space-around;width: 100%;">
                 <div style="    display: flex;">
                <div v-for="item in InfoList" style="margin-left: 25px"><b>{{item}}</b></div>
              </div>
               <div style="display: flex;">
                <div v-for="itemTow in InfoListTwo" style="margin-left: 25px"><b>{{itemTow}}</b></div>
              </div>
             </div>
           </div>
           <div class="NecessaryInfo">
             <div class="NameFont"></div>
             <div style="display: flex;width: 100%">
               <el-input v-model="SelfDefinedInput" size="small" placeholder="自定义" style="display: flex;align-items: center;width: 15%;"></el-input>
               <i class="el-icon-circle-plus-outline AddNew" v-on:click="AddInfoList"></i>
             </div>
           </div>
           <el-card class="MatchCard"  v-if="Series&&matchCheckType==3">
             <div class="MatchPoints">
               <div class="leftBox">
                 <div>本次比赛积分：</div>
               </div>
               <div class="rightBox">
                 <div id="4" class="lineBox">
                   <div class="inputBox">
                     <div class="pointsInput" v-for="(input4,index) in pointsInputs4">
                       <div class="pointsIndex">{{index+1}}</div>
                       <el-input
                         v-model="pointsInputs4[index]"
                         maxlength="5"
                         size="small"
                         clearable style="width: 150px;margin-left: 10px;">
                       </el-input>
                     </div>
                   </div>
                   <div class="radio"></div>
                 </div>
                 <div id="8" class="lineBox">
                   <div class="inputBox">
                     <div class="pointsInput" v-for="(input8,index) in pointsInputs8">
                       <div class="pointsIndex">{{index+5}}</div>
                       <el-input
                         v-model="pointsInputs8[index]"
                         maxlength="5"
                         size="small"
                         clearable style="width: 150px;margin-left: 10px;">
                       </el-input>
                     </div>
                   </div>
                   <div class="radio">
                     <el-switch v-model="checkSame8" label="1" class="radioCheck" active-text="5 - 8名积分一致"></el-switch>
                   </div>
                 </div>
                 <div id="16" class="lineBox">
                   <div class="inputBox">
                     <div class="pointsInput" v-for="(input16,index) in pointsInputs16">
                       <div class="pointsIndex">{{index+9}}</div>
                       <el-input
                         v-model="pointsInputs16[index]"
                         maxlength="5"
                         size="small"
                         clearable style="width: 150px;margin-left: 10px;">
                       </el-input>
                     </div>
                   </div>
                   <div class="radio">
                     <el-switch v-model="checkSame16" label="1" class="radioCheck" active-text="9 - 16名积分一致"></el-switch>
                   </div>
                 </div>
                 <div id="32" class="lineBox">
                   <div class="inputBox">
                     <div class="pointsInput" v-for="(input32,index) in pointsInputs32">
                       <div class="pointsIndex">{{index+17}}</div>
                       <el-input
                         v-model="pointsInputs32[index]"
                         maxlength="5"
                         size="small"
                         clearable style="width: 150px;margin-left: 10px;">
                       </el-input>
                     </div>
                   </div>
                   <div class="radio">
                     <el-switch v-model="checkSame32" label="1" class="radioCheck" active-text="17 - 32名积分一致"></el-switch>
                   </div>
                 </div>
                 <div id="64" style="width: 100%;display: flex;margin-top: 10px;">
                   <div style="width: 70%;display: flex;">
                     <div class="pointsInput">
                       <div class="pointsIndex">33-64</div>
                       <el-input
                         v-model="pointsInputs64[0]"
                         maxlength="3"
                         size="small"
                         clearable style="width: 150px;margin-left: 10px;">
                       </el-input>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </el-card>
           <div v-show="step==2" style="justify-content: center;display: flex;margin-top: 30px;margin-bottom: 30px;">
             <el-button round style="width: 200px" type="primary" @click="GoStep3">下一步</el-button>
           </div>
         </div>
       </div>
        <div v-show="step==3" style="justify-content: center;display: flex;margin-top: 30px;margin-bottom: 30px;">
          <el-button :disabled="disabled" round style="width: 200px" type="primary" @click="Submit">{{GoNext}}</el-button>
        </div>
      </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex'
    export default {
      name: "AddMatchDetail",
			
      data(){
          return{
            GoNext:'下一步',
            options: [{
              value: '省',
              label: '省'
            }, {
              value: '市',
              label: '市'
            }, {
              value: '区',
              label: '区'
            }],
          //年龄选择范围
            statadateLimit:"",
            enddateLimit:"",
            selectedOptions: ['','',''],
            AvoidInputsDisabled:[false,false,false],
            AvoidSelectedDisabled:[false,false,false],
            RefereeName:'',
            MatchName:'',
            MatchLocation:'',
            Organization:'',
						isloading:false,//加载状态
            SelfDefined:[
              {
                group:'',
                AgeMin:'',
                AgeMax:'',
                types:[
                  {
                    type:'',
                    price:'',
                    limit:'',
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
                  {
                    type:'',
                    price:'',
                    limit:''
                  },
									{
									  type:'',
									  price:'',
									  limit:''
									},
									{
									  type:'',
									  price:'',
									  limit:''
									},
                ],
              },
            ],
            MatchType:['男单','女单','单打','男双','女双','混双','双打','男团','女团','混团'],
            TypeCheck:['','','','','','','',''],
            EndTime:'',
            StartTime:'',
            AvoidCheck:false,
            OneUnit:'',
            TwoUnit:'',
            ThreeUnit:'',
          //  MatchDetailObjStep1:{}
            InfoList:['姓名','年龄','性别','组别-项目','身份证号码','手机号码'],
            InfoListTwo:[],
            InfoCheckList:[],
            SelfDefinedInput:'',
            NumCheck:false,
            NumLimits:'',
            Series:true,
            pointsInputs4:[],
            pointsInputs8:[],
            pointsInputs16:[],
            pointsInputs32:[],
            pointsInputs64:[],
            checkSame8:false,
            checkSame16:false,
            checkSame32:false,
            checkSame64:false,
            SubmitObj:{},
            matchCheckType:'', //matchcheck.type
            SelfDefinedInputArr:[],
            enrollTime: '',
            addType: window.sessionStorage.getItem('AddMatchDetailUploadType'),
            disabled: false
          }
        },
      watch:{
        MatchCheckInputs(val){

        },
        step:function (val) {
          if(val==3){
            this.GoNext='是否完成核对'
          }
          else{
            this.GoNext='下一步'
          }
        },
        AvoidCheck:function (val) {
          if(!val){
            this.AvoidInputsDisabled = [false,false,false]
            this.AvoidSelectedDisabled = [false,false,false]
            this.selectedOptions = [[],[],[]]
            this.OneUnit = ''
            this.TwoUnit = ''
            this.ThreeUnit = ''
          }
        },
        OneUnit:function (val) {
          if(!val){
            this.AvoidSelectedDisabled[0] = false
          }
          else{
            this.AvoidSelectedDisabled[0] = true
          }
        },
        TwoUnit:function (val) {
          if(!val){
            this.AvoidSelectedDisabled[1] = false
          }
          else{
            this.AvoidSelectedDisabled[1] = true
          }
        },
        ThreeUnit:function (val) {
          if(!val){
            this.AvoidSelectedDisabled[2] = false
          }
          else{
            this.AvoidSelectedDisabled[2] = true
          }
        },
        checkSame8(val){
          if(val&&this.pointsInputs8[0]){
            var samepoints = this.pointsInputs8[0]
            for(let a in this.pointsInputs8){
              this.pointsInputs8[a] = samepoints
            }
          }
          if(!val){
            for(let a in this.pointsInputs8){
              this.pointsInputs8[a] = ''
            }
          }
        },
        checkSame16(val){
          if(val&&this.pointsInputs16[0]){
            var samepoints = this.pointsInputs16[0]
            for(let a in this.pointsInputs16){
              this.pointsInputs16[a] = samepoints
            }
          }
          if(!val){
            for(let a in this.pointsInputs16){
              this.pointsInputs16[a] = ''
            }
          }
        },
        checkSame32(val){
          if(val&&this.pointsInputs32[0]){
            var samepoints = this.pointsInputs32[0]
            for(let a in this.pointsInputs32){
              this.pointsInputs32[a] = samepoints
            }
          }
          if(!val){
            for(let a in this.pointsInputs32){
              this.pointsInputs32[a] = ''
            }
          }
        },
        MatchCheck(val){
          // this.MatchType = val.group_list
          let obj =  JSON.parse(JSON.stringify(val))
          let matchId = this.$route.query.MatchId
          this.MatchName = obj.name
          this.Organization = obj.host
          this.MatchLocation = obj.address
          this.StartTime = obj.start_time
          this.EndTime = obj.end_time
          this.enrollTime = obj.apply_start_time
          this.RefereeName = obj.ref_id.get_user.name
          this.matchCheckType = obj.type         //=3 显示积分
          if(this.step==3) {
            this.GoNext = '是否完成核对'
            if (obj.limit == 1) {
              this.AvoidCheck = true
              this.OneUnit = obj.one_limit
              this.TwoUnit = obj.two_limit
              this.ThreeUnit = obj.three_limit
            }
            let PI = this.MatchCheckInputs
            if(PI.PA.length>0){
              this.pointsInputs4 = PI.PA.slice(0, 4)
              this.pointsInputs8 = PI.PA.slice(3, 7)
              this.pointsInputs16 = PI.PA.slice(8, 16)
              this.pointsInputs32 = PI.PA.slice(16, 32)
              this.pointsInputs64 = PI.PA.slice(33, 34)}
              this.InfoList.splice(0, this.InfoList.length)
            for (let i in obj.requires) {
              this.InfoList.push(obj.requires[i])
              this.InfoCheckList.push(obj.requires[i])
            }
            this.SelfDefined.splice(0, this.SelfDefined.length)
            for (let i in obj.com_project) {
              var types = []
              for (let j in obj.com_project[i]) {
                types.push({
                  type: obj.com_project[i][j].type,
                  price: obj.com_project[i][j].price,
                  limit: obj.com_project[i][j].limit,
                  id:obj.com_project[i][j].id,
                  bool:obj.com_project[i][j].bool,
                })
              }
              this.SelfDefined.push({
                group: i,
                AgeMin: obj.com_project[i][0].age[0],
                AgeMax: obj.com_project[i][0].age[1],
                types:types,
              })
            }
          }
        },
      },
      computed:{
        ...mapState({
          step:'AddMatchDetailStep',
          MatchDetailObj:'AddMatchDetailObj',
          MatchCheck:'MatchCheck',
          AddMatchDetailUploadType:'AddMatchDetailUploadType',
          MatchCheckInputs:'MatchCheckInputs'
        }),
      },
      created(){
				console.log(this.SelfDefined)
        let type =  window.sessionStorage.getItem('AddMatchDetailUploadType')
        for( let i = 4 ;i > 0;i--){
          this.pointsInputs4.push('')
          this.pointsInputs8.push('')
        }
        for(let j = 8;j > 0;j--){
          this.pointsInputs16.push('')
        }
        for(let z = 16;z > 0;z--){
          this.pointsInputs32.push('')
        }
        for(let x = 1; x > 0;x--){
          this.pointsInputs64.push('')
        }
        if(type==0) this.$store.commit('setAddMatchDetailStep',1) //补全赛事
        if(type==1) this.$store.commit('setAddMatchDetailStep',3) //编辑赛事
        this.$store.dispatch('getMatchCheck',this.$route.query.MatchId)
      },
      methods:{
        SortClick(index){

        },
        handleChangeOne (value) {
          this.AvoidInputsDisabled[0] = true
        },
        handleChangeTwo (value) {
          this.AvoidInputsDisabled[1] = true
        },
        handleChangeThree (value) {
          this.AvoidInputsDisabled[2] = true
        },
        isRepeat(arr) {
          var hash = {};
          for (var i in arr) {
            if (hash[arr[i]]) return true;
            hash[arr[i]] = true;
          }
          return false;
        },
        isRepeatGroup(){
          let arr = []
          for (let i = 0; i < this.SelfDefined.length; i++) {
            arr.push(this.SelfDefined[i].group)
          }
          if (this.isRepeat(arr)) {
            this.$message({
            	type: 'info',
            	message: '自定义组别不能重复!'
            })
            this.disabled = false
            return true
          }
        },
        addMore(){
          if (this.isRepeatGroup()) {
            return
          }
          this.SelfDefined.push({
            group:'',
            AgeMin:'',
            AgeMax:'',
            types:[
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
              {
                type:'',
                price:'',
                limit:''
              },
							{
							  type:'',
							  price:'',
							  limit:''
							},
							{
							  type:'',
							  price:'',
							  limit:''
							}
            ],})
        },
        addClose(index){
          this.SelfDefined.splice(index,1)
        },
        AddInfoList(){
          if(this.SelfDefinedInput) {
             this.SelfDefinedInputArr.push(this.SelfDefinedInput)
            if (this.InfoListTwo.length <10) {
              this.InfoListTwo.push(this.SelfDefinedInput)
              this.SelfDefinedInput = ''
            }
            else{
              if(this.InfoList.length<10){
                this.InfoList.push(this.SelfDefinedInput)
                this.SelfDefinedInput = ''
              }
              else{
                this.$message.error('超出自定义数量限制');
              }
            }
          }
        },
				projectTypeChange(value){
				},
        GoStep2(){
          if(this.OneUnit!=""){
             this.InfoListTwo.push(this.OneUnit)
          }
         if(this.TwoUnit!=""){
             this.InfoListTwo.push(this.TwoUnit)
          }
          if(this.ThreeUnit!=""){
             this.InfoListTwo.push(this.ThreeUnit)
          }
           if(this.selectedOptions[0]!=""){
             this.InfoListTwo.push(this.selectedOptions[0])
          }
           if(this.selectedOptions[1]!=""){
             this.InfoListTwo.push(this.selectedOptions[1])
          }
           if(this.selectedOptions[2]!=""){
             this.InfoListTwo.push(this.selectedOptions[2])
          }
          let  MatchDetailObj = JSON.parse(JSON.stringify(this.MatchDetailObj))
          MatchDetailObj.com_id = this.$route.query.MatchId
          MatchDetailObj.MatchName = this.MatchName
          MatchDetailObj.Organization = this.Organization
          MatchDetailObj.MatchLocation = this.MatchLocation
          MatchDetailObj.group = this.SelfDefined
          MatchDetailObj.EndTime = this.EndTime
          MatchDetailObj.StartTime = this.StartTime
          MatchDetailObj.AvoidCheck = this.AvoidCheck
          // 新增报名开始时间
          MatchDetailObj.apply_start_time = this.enrollTime
          //应该把输入框也合成一个数组的 都写到这里了 算了吧
          if(this.OneUnit==''){
            MatchDetailObj.one_limit = this.selectedOptions[0]
          }
          else{
            MatchDetailObj.one_limit = this.OneUnit
          }
          if(this.TwoUnit==''){
            MatchDetailObj.two_limit = this.selectedOptions[1]
          }
          else{
            MatchDetailObj.two_limit = this.TwoUnit
          }
          if(this.ThreeUnit==''){
            MatchDetailObj.three_limit = this.selectedOptions[2]
          }
          else{
            MatchDetailObj.three_limit = this.ThreeUnit
          }
					let arr = []
					for (var i = 0; i < this.SelfDefined[0].types.length; i++) {
						if (this.SelfDefined[0].types[i].type == true) {
							arr.push(this.SelfDefined[0].types[i].type)
							if (!this.SelfDefined[0].types[i].price) {
								this.SelfDefined[0].types[i].price = '0.01'
							}
						}
					}
					if (this.MatchName.trim() == '') {
						this.$message({
							type: 'info',
							message: '赛事名称为必填字段'
						})
					} else if(this.Organization.trim() == ''){
						this.$message({
							type: 'info',
							message: '主办单位为必填字段'
						})
					}else if(this.MatchLocation.trim() == ''){
						this.$message({
							type: 'info',
							message: '比赛地点为必填字段'
						})
					}else if(arr.length == 0){
						this.$message({
							type: 'info',
							message: '项目类型不能少于1'
						})
					}else if(!this.EndTime){
						this.$message({
							type: 'info',
							message: '报名截止时间为必填字段'
						})
					}else if(!this.StartTime){
						this.$message({
							type: 'info',
							message: '比赛开始时间为必填字段'
						})
					}else if(!this.enrollTime){
						this.$message({
							type: 'info',
							message: '报名开始时间为必填字段'
						})
					}else{
						this.$store.commit('setAddMatchDetailStep',2)
					}
          this.SubmitObj = MatchDetailObj
        },
        GoStep3(){
          this.SubmitObj.ImportantInfo = this.InfoCheckList
          this.SubmitObj.NumLimits = this.NumLimits
          this.SubmitObj.pointsInputs4 = this.pointsInputs4
          this.SubmitObj.pointsInputs8 = this.pointsInputs8
          this.SubmitObj.pointsInputs16 = this.pointsInputs16
          this.SubmitObj.pointsInputs32 = this.pointsInputs32
          this.SubmitObj.pointsInputs64 = this.pointsInputs64
          this.$store.commit('setAddMatchDetailStep',3)
					
          //    this.$store.commit('setAddMatchDetailObj',MatchDetailObj)
        },
        Submit(){
          this.disabled = true
					this.isloading = true
          if (this.isRepeatGroup()) {
            return
          }
           if(this.selectedOptions[0]!=""){
             this.InfoListTwo.push(this.selectedOptions[0])
          }
           if(this.selectedOptions[1]!=""){
             this.InfoListTwo.push(this.selectedOptions[1])
          }
           if(this.selectedOptions[2]!=""){
             this.InfoListTwo.push(this.selectedOptions[2])
          }
          this.SubmitObj.com_id = this.$route.query.MatchId
          this.SubmitObj.MatchName = this.MatchName
          this.SubmitObj.com_type = this.MatchCheck.type
          this.SubmitObj.Organization = this.Organization
          this.SubmitObj.MatchLocation = this.MatchLocation
          this.SubmitObj.group = this.SelfDefined
          this.SubmitObj.EndTime = this.EndTime
          this.SubmitObj.StartTime = this.StartTime
          this.SubmitObj.AvoidCheck = this.AvoidCheck
          this.SubmitObj.apply_start_time = this.enrollTime
          //应该把输入框也合成一个数组的 都写到这里了 算了吧
          if(this.OneUnit==''){
            this.SubmitObj.one_limit = this.selectedOptions[0]
          }
          else{
            this.SubmitObj.one_limit = this.OneUnit
          }
          if(this.TwoUnit==''){
            this.SubmitObj.two_limit = this.selectedOptions[1]
          }
          else{
            this.SubmitObj.two_limit = this.TwoUnit
          }
          if(this.ThreeUnit==''){
            this.SubmitObj.three_limit = this.selectedOptions[2]
          }
          else{
            this.SubmitObj.three_limit = this.ThreeUnit
          }
          this.InfoListTwo=this.SubmitObj.ImportantInfo
          this.SubmitObj.ImportantInfo = this.InfoCheckList
          this.SubmitObj.NumLimits = this.NumLimits
          this.SubmitObj.pointsInputs4 = this.pointsInputs4
          this.SubmitObj.pointsInputs8 = this.pointsInputs8
          this.SubmitObj.pointsInputs16 = this.pointsInputs16
          this.SubmitObj.pointsInputs32 = this.pointsInputs32
          this.SubmitObj.pointsInputs64 = this.pointsInputs64
          let MatchDetailObj = JSON.parse(JSON.stringify(this.SubmitObj))
          if(MatchDetailObj.AvoidCheck){
            MatchDetailObj.AvoidCheck = '1'
          }
          else{
            MatchDetailObj.AvoidCheck = '0'
          }
          var matchtype  = ['男单','女单','单打','男双','女双','混双','双打','男团','女团','混团']
          for(let i in MatchDetailObj.group){
            let uploadArr = []
            for(let j in MatchDetailObj.group[i].types){
              if(MatchDetailObj.group[i].types[j].type){
                MatchDetailObj.group[i].types[j].type = matchtype[j]
                uploadArr.push(MatchDetailObj.group[i].types[j])
              }
            }
          let dateLimit=[]
          dateLimit.push(this.statadateLimit,this.enddateLimit)
          this.AgeMax=dateLimit.push(this.statadateLimit,this.enddateLimit)
            MatchDetailObj.group[i].types = uploadArr
            MatchDetailObj.group[i].AgeMax=MatchDetailObj.group[i].AgeMax
            MatchDetailObj.group[i].AgeMin=MatchDetailObj.group[i].AgeMin
            if(MatchDetailObj.group[i].AgeMin){
              MatchDetailObj.group[i].age= MatchDetailObj.group[i].AgeMin + ',' + MatchDetailObj.group[i].AgeMax
            }else{
              MatchDetailObj.group[i].age =""
            }
            MatchDetailObj.group[i].com_id =MatchDetailObj.com_id // ????
          }
          var require = ''
          // 把同同单位回避添加到报名必填信息
          if(MatchDetailObj.one_limit!=''){
            MatchDetailObj.ImportantInfo.push(MatchDetailObj.one_limit)
          }
           if(MatchDetailObj.two_limit!=''){
            MatchDetailObj.ImportantInfo.push(MatchDetailObj.two_limit)
          }
           if(MatchDetailObj.three_limit!=''){
            MatchDetailObj.ImportantInfo.push(MatchDetailObj.three_limit)
          }
          // 数组去重
          function dedupe(array){
            return Array.from(new Set(array));
          }
          let MatchDetailObjArr= dedupe(MatchDetailObj.ImportantInfo)
          for(let k=0;k<this.SelfDefinedInputArr.length;k++){
                MatchDetailObjArr.push(this.SelfDefinedInputArr[k])
          }
          for(let a in MatchDetailObjArr){
            require = require + ',' + MatchDetailObjArr[a]
          }
          require =  require.substring(1)
          var _this = this
          var url = ''
          let type = window.sessionStorage.getItem('AddMatchDetailUploadType')
          if(type==1){
            url = 'event/ref_com_edit'
          }
          if(type==0){
            let isRequire=["姓名","年龄","性别","身份证号码","组别-项目","手机号码"]
            isRequire.push(require.split(","))
            require=isRequire.join()
            url = '/event/ref_com_cfm'
          }
          let score = {
            ranking1:MatchDetailObj.pointsInputs4[0],
            ranking2:MatchDetailObj.pointsInputs4[1],
            ranking3:MatchDetailObj.pointsInputs4[2],
            ranking4:MatchDetailObj.pointsInputs4[3],
            ranking5:MatchDetailObj.pointsInputs8[0],
            ranking6:MatchDetailObj.pointsInputs8[1],
            ranking7:MatchDetailObj.pointsInputs8[2],
            ranking8:MatchDetailObj.pointsInputs8[3],
            ranking9:MatchDetailObj.pointsInputs16[0],
            ranking10:MatchDetailObj.pointsInputs16[1],
            ranking11:MatchDetailObj.pointsInputs16[2],
            ranking12:MatchDetailObj.pointsInputs16[3],
            ranking13:MatchDetailObj.pointsInputs16[4],
            ranking14:MatchDetailObj.pointsInputs16[5],
            ranking15:MatchDetailObj.pointsInputs16[6],
            ranking16:MatchDetailObj.pointsInputs16[7],
            ranking17:MatchDetailObj.pointsInputs32[0],
            ranking18:MatchDetailObj.pointsInputs32[1],
            ranking19:MatchDetailObj.pointsInputs32[2],
            ranking20:MatchDetailObj.pointsInputs32[3],
            ranking21:MatchDetailObj.pointsInputs32[4],
            ranking22:MatchDetailObj.pointsInputs32[5],
            ranking23:MatchDetailObj.pointsInputs32[6],
            ranking24:MatchDetailObj.pointsInputs32[7],
            ranking25:MatchDetailObj.pointsInputs32[8],
            ranking26:MatchDetailObj.pointsInputs32[9],
            ranking27:MatchDetailObj.pointsInputs32[10],
            ranking28:MatchDetailObj.pointsInputs32[11],
            ranking29:MatchDetailObj.pointsInputs32[12],
            ranking30:MatchDetailObj.pointsInputs32[13],
            ranking31:MatchDetailObj.pointsInputs32[14],
            ranking32:MatchDetailObj.pointsInputs32[15],
            ranking33:MatchDetailObj.pointsInputs64[0],}
          for(let a =1;a<32;a++){
            let b = a+33
            score['ranking'+b]=MatchDetailObj.pointsInputs64[0]
          }
          this.$axios.post(url,{
            com_id:MatchDetailObj.com_id,
            name:MatchDetailObj.MatchName,
            com_type:MatchDetailObj.com_type,
            host:MatchDetailObj.Organization,
            address:MatchDetailObj.MatchLocation,
            end_time:MatchDetailObj.EndTime,
            start_time:MatchDetailObj.StartTime,
            limit:MatchDetailObj.AvoidCheck,
            one_limit:MatchDetailObj.one_limit,
            two_limit:MatchDetailObj.two_limit,
            three_limit:MatchDetailObj.three_limit,
            require:require,
            person_limit:MatchDetailObj.NumLimits,
            project: MatchDetailObj.group,
            score:score,
            apply_start_time: MatchDetailObj.apply_start_time
          },{
            headers:{
              token:window.sessionStorage.getItem('token')
            }
          })
            .then(function (res){
							setTimeout(()=>{
								_this.isloading = false
							},1000)
							console.log(res)
							// return false
              if(res.data.code==400){
                _this.disabled = false
                _this.$message({
                  message: res.data.message,
                  type: 'error'
                });
              }
              if(res.data.code==200){
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                setTimeout(()=>{
									_this.$router.push('/Index/Match/')
								},1500)
              }
            })
        },
        ChangeStep(val){
          this.$store.commit('setAddMatchDetailStep',val)
        },
      },
    }
</script>

<style scoped>
.colorRed{
  color: #f00;
  font-size: 10px!important;
}
.AddMatchDetail{
  width: 90%;
  margin-top: 50px;
  margin-left: 40px;
  /*height: 90%;*/
}
.AddMatchTop{
display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.AddMatchContent{
  height: 100%;
}
.AddMatchInfo{
  height: 80%;
  display: flex;
  flex-direction: column;
}
.AddMatchImportant{
  height: 80%;
  display: flex;
  flex-direction: column;
}
.AddMatchCheck{
  height: 80%;
  display: flex;
  flex-direction: column;
}
  /***********************************BasicInfo********************************************/
.MatchBasicInfo{
  width: 100%;
  height: 70%;
}
.Item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.InfoItem{
  display: flex;
  align-items: center;
  width: 45%;
  height: 42px;
}
.addClose{
  border-radius: 50%;
  font-size: 23px;
  margin-left: 50px;
  margin-bottom: 30px;
}
.addClose:hover{
  background: #D1D3D6;
  transform:rotate(90deg);
  transition: 1s;
}
.addMore{
  /* margin-right: 70px; */
	margin-right: 10px;
  width: 30px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  float: right;
  font-size: 20px;
  background: #D1D3D6;
  border-radius: 50%;
  color: #666;
}
.addMore:hover{
  transform:rotate(90deg);
  transition: 1s;
}
.addMore:active{
  background: #E8EAED;
}
.SelfDefined{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 40%;
  width: 90%;
	width: 100%;
  margin-bottom: 10px;
}
.NameFont{
  width: 20%;
  line-height: 42px;
}
.InputSize{
  width: 65%;
  height: 42px;
}
.Age{
  width: 80%;
  display: flex;
  justify-content: space-around;
}
.AgeInput{
  width: 40%;
  height: 42px;
  align-items: center;
  display: flex;
}
.PriceInput{
  height: 42px;
  width: 10%;
}
.PriceInput+.PriceInput {
  margin-left: 30px;
  width: 10%;
}
.box-card{
  width: 50%;
}
.ChooseUnit{
  display: flex;
  height: 42px;
  margin-bottom: 10px;
  align-items: center;
  /* justify-content: space-between; */
}
/***********************************ImportantInfo********************************************/
.MatchImportantInfo{
  /*height: 80%;*/
}
.NecessaryInfo{
  display: flex;
  align-items: center;
  height: 84px;
}
.NameFont{
  width: 20%;
  line-height: 42px;
}
.AddNew{
  font-size: 26px;
  line-height: 42px;
  margin-left: 12px;
  color: #409EFF;
}
.ImportantInfoItem{
  display: flex;
  align-items: center;
  width: 80%;
  height: 42px;
  padding-bottom: 10px;
  border-bottom: 1px solid #BBBBBB;
}
.MatchCard{
  width: 90%;
  margin-top: 20px;
}
.MatchPoints{
  display: flex;
  /*align-items: center;*/
  width: 100%;
}
.leftBox{
  width: 20%;
}
.rightBox{
  width: 80%;
  display: flex;
  flex-direction: column;
}
.lineBox{
  width: 100%;
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #BBBBBB;
}
.inputBox{
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 70%;
}
.pointsInput{
  width: 25%;
  display: flex;
  align-items: baseline;
  justify-content: space-around;
  margin-bottom: 10px;
}
.pointsIndex{
  width: 40%;
  text-align: center;
}
.radio{
  width: 30%;
}
.radioCheck{
  margin-top: 4%;
  margin-left: 10%;
}
</style>
